/*
 * Copyright (C) 2022 KylinSoft Co., Ltd.
 *
 * This program is free software: you can redistribute it and/or modify it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option) any later
 * version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */

import QtQuick 2.12
import QtQuick.Layouts 1.12
import "."


Rectangle {
    id: root
    property string title: "container"
    property bool readOnly: true
    property var txtwidth: root.width
    property var titleTxt: title

    signal editVisible()
    signal editInVisible()
    signal containerTitleChange(string newTitle)
    width:  (titleInput.contentWidth < 1) ? (90 * Style.widthScaleFactor)  :
                                         (titleInput.contentWidth + 110) * Style.widthScaleFactor

    radius: 10
    color: "white"
    state: "Normal"

    states: [
        State {
            name: "Normal"
            PropertyChanges {
                target: image
                source: "qrc:/ui/images/ukui_teaching_default.svg"
            }
            PropertyChanges {
                target: titleText
                visible: true
            }
            PropertyChanges {
                target: titleInput
                visible: false
            }
            PropertyChanges {
                target: mouseArea
                visible: true
            }
            StateChangeScript {
                script: {
                    root.width = Qt.binding(function() {
                        return titleInput.contentWidth < 1 ?
                                    (90 * Style.widthScaleFactor) : (titleInput.contentWidth + 110) * Style.widthScaleFactor
                    })
                    titleInput.rightPadding = Qt.binding(function() {
                        return image.width * Style.widthScaleFactor
                    })
                }
            }
        },
        State {
            name: "Editable"
            PropertyChanges {
                target: image
                source: "qrc:/ui/images/ukui_exit_symbolic.svg"
            }
            PropertyChanges {
                target: titleText
                visible: false
            }
            PropertyChanges {
                target: mouseArea
                visible: false
            }
            PropertyChanges {
                target: titleInput
                readOnly: false
                focus: true
            }
            StateChangeScript {
                script: {
                    root.width = Qt.binding(function() {
                        return 400 * Style.widthScaleFactor
                    })
                    titleInput.rightPadding = Qt.binding(function() {
                        return image.width * Style.widthScaleFactor
                    })
                }
            }
        }
    ]

    Text {
        id: titleText
        width: parent.width - 20 * Style.tabletScaleFactor
        height: 30 * Style.heightScaleFactor
        anchors.centerIn: parent
        horizontalAlignment: TextInput.AlignHCenter
        verticalAlignment: TextInput.AlignVCenter
        font.pointSize: Style.widthScaleFactor * 14
        text: titleTxt
    }
    TextInput {
        id: titleInput
        width: parent.width - 20 * Style.tabletScaleFactor
        height: 30 * Style.heightScaleFactor
        anchors.centerIn: parent
        horizontalAlignment: TextInput.AlignLeft
        verticalAlignment: TextInput.AlignVCenter
        maximumLength: 8
        font.pointSize: Style.widthScaleFactor * 14
        clip: true
        text: titleTxt
        rightPadding: 10 * Style.widthScaleFactor
        onEditingFinished: {
            if (text.length === 0) {
                text = Qt.binding(function() { return titleTxt })
            } else {
                containerTitleChange(text)
                titleTxt = text
            }
            root.editInVisible()
            root.state = "Normal"
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: {
            if (titleEditable === false){
                container.focusChange()
                container.clicked()
            }
        }
        onPressAndHold: {
            root.state = "Editable"
            root.editVisible()
        }
    }

    Image {
        id: image
        visible: !readOnly
        anchors.right: titleInput.right
        anchors.verticalCenter: parent.verticalCenter
        sourceSize { width: 16 * Style.widthScaleFactor; height: 16 * Style.heightScaleFactor; }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (root.state === "Normal") {
                    root.editVisible()
                    root.state = "Editable"
                }
                else if (root.state == "Editable") {
                    titleInput.text = ""
                }
            }
        }
    }

    function focusHandle(){
        container.focus = true
        root.state = "Normal"
    }
}
